<template>
  <!-- 主体区域 -->
  <section id="app">
   <TodoHeader @add="handleAdd"></TodoHeader>
   <TodoMain @del="handleDel" :list="list"></TodoMain>
   <TodoFooter @clear="handleClear" :list="list"></TodoFooter>
  
    
  </section>
</template>

<script>
import TodoHeader from './components/TodoHeader.vue'
import TodoMain from './components/TodoMain.vue'
import TodoFooter from './components/TodoFooter.vue'

//渲染功能：
//1.提供数据 -> 提供在公共的父组件，App.vue
//2.通过父传子，将数据传递给 TodoMain
//3.利用 v-for 进行渲染

//添加功能
//1.收集表单数据 v-model
//2.监听事件，（回车 + 点击 都要进行添加 @keyup.enter=""handleAdd）
//3.子传父，将任务名称传给自己的父组件
//4.父组件进行添加 unshift{}

//删除功能
//1.监听事件 (监听删除的id)
//2.子传父 将删除的id传递给父组件
//3.父组件进行删除 filter()

//底部合计功能  父传子 ：list="list" 
//底部清空任务功能 
//底部持久化储存功能
//监视list的变化，然后存储到本地，进入到页面优先读取
export default {
  data () {
    return {
      list: JSON.parse(localStorage.getItem('list')) || [
          { id: 1, name: '跑步'},
          { id: 2, name: '打篮球'},
          { id: 3, name: '跳绳'},
      ]
     }
  },
  methods: {
    handleAdd(todoName) {
      this.list.unshift({
        id: +new Date(),
        name: todoName
      })
    },
    handleDel(id) {
      this.list = this.list.filter(item => item.id !== id)
    },
    handleClear() {
      this.list = []
    }
  },
  watch: {
    list: {
      deep: true,
      handler(newValue) {
        localStorage.setItem('list',JSON.stringify(newValue))
      }
    }
  },
  components: {
    TodoHeader,
    TodoMain,
    TodoFooter
  }
}
</script>

<style>

</style>
